<template>
  <div id="app">
    <transition name="fade" mode="out-in">
      <router-view/>
    </transition>
  </div>
</template>

<script>
import { mapState } from 'vuex'
// import getData from '@/utils/getData'
import { request } from '@/utils/request'
import { io } from 'socket.io-client'
export default {
  data () {
    return {
      timer: null
    }
  },

  computed: {
    ...mapState([
      'projectList',
      'selectedProjectId',
      'selectedSequence',
      'recording',
      'CLNumber',
      'mode'
    ]),
    CLLength () {
      if (!this.selectedProjectId) return 9.7
      const project = this.projectList.find(item => item.projectId === this.selectedProjectId)
      return project ? project.len : 9.7
    }
  },

  watch: {
    recording (val) {
      if (val) {
        this.$message({
          type: 'success',
          message: '数据已开始记录',
          showClose: true
        })
        this.startCron()
      } else {
        this.clearTimer()
        this.$message({
          type: 'info',
          message: '已停止数据记录',
          showClose: true
        })
      }
    },

    mode (val) {
      if (val === 'display') {
        this.connectSocket()
      }
    }
  },

  mounted () {
    this.connectSocket()
  },

  beforeDestroy () {
    this.clearTimer()
  },

  methods: {
    // 演示模式下记录数据
    connectSocket () {
      // if (this.mode !== 'display') return
      const socket = io('http://8.142.17.88:3000')
      socket.on('ready', (data) => {
        console.log(data, '000000')
      })
      socket.on('send', (data) => {
        console.log(data, '-----')
        if (data && data.code === '103') {
          this.$message({
            type: 'warning',
            message: '数据请求异常，请联系徐工恢复数据接口！',
            showClose: true
          })
        } else {
          const {
            slurryPressure, // 泥浆压力
            pushPull, // 动力头推拉力
            rotationSpeed, // 动力头旋转速度,
            torque, // 动力头扭矩
            // currWorkTime, // 当前工作时间
            // vehId
            engineSpeed
          } = data.data[0]
          // 获取实时数据进行显示

          this.$store.dispatch('getTimingData', {
            slurryPressure,
            rotationSpeed,
            pushPull,
            engineSpeed,
            torque
          })
        }
      })
    },
    // 清楚定时任务
    clearTimer () {
      this.timer && clearInterval(this.timer)
    },
    // 获取数据
    async getData () {
      if (this.mode !== 'stretch' && this.selectedProjectId && this.selectedSequence) return
      const url = '/record/timing-data'
      const res = await request(url, 'GET')
      console.log(res)
      return res
    },
    // 上报数据-本地实时展示
    async getTimingData () {
      const res = await this.getData()
      if (res.code === '103' || !res.data) {
        this.$message({
          type: 'warning',
          message: '数据请求异常，请联系徐工恢复数据接口！',
          showClose: true
        })
        return
      }

      const { slurryPressure, rotationSpeed, pushPull, engineSpeed, torque } = res.data[0]

      this.$store.dispatch('getTimingData', {
        slurryPressure,
        rotationSpeed,
        pushPull,
        engineSpeed,
        torque
      })

      this.uploadDataToServer(res.data[0])
    },

    // 向服务器上报数据
    uploadDataToServer (data) {
      const {
        workTime, // 当前工作时间,
        vehId, // 车辆id
        slurryPressure, // 泥浆压力
        pushPull, // 推拉压力
        rotationSpeed, // 旋转速度
        torque, // 扭矩
        engineSpeed, // 发动机转速
        accStatus
      } = data
      if (accStatus === '0') {
        return
      }

      // 检查当前工程信息
      const { selectedProjectId, selectedSequence } = this
      if (!selectedProjectId || !selectedSequence) {
        this.$message({
          type: 'warning',
          message: '请检查工程信息和作业信息是否选择完整',
          showClose: true
        })
        return
      }

      const uploadData = {
        projectId: selectedProjectId,
        workName: selectedSequence,
        vehId,
        currentCLIndex: this.CLNumber, // 当前为第几根钻杆
        deepLength: this.CLNumber * this.CLLength, // 钻孔深度
        date: new Date(workTime).getTime(),
        engineSpeed,
        runningForce: pushPull,
        rotateForce: torque,
        landForce: slurryPressure,
        rotateSpeed: rotationSpeed
      }
      this.$store.dispatch('uploadData', uploadData).then(res => {
        console.log(res, 'uplaod')
      })
    },

    // 定时任务
    startCron () {
      this.clearTimer()
      this.getTimingData()
      this.timer = setInterval(() => {
        console.log('setInterval')
        this.getTimingData()
        // this.getDesktop()
      }, 70000)
    }
  }
}
</script>

<style lang="scss">
#app {
  width: 100vw;
  height: 100vh;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

::-webkit-scrollbar{
  display: none;
}
</style>
